<template>
  <div id="BacInstrAntib">
    <Breadcrumb content="细菌仪抗生素字典库" />
    <div class="bodyContent">
      <el-tabs type="border-card">
        <el-tab-pane label="细菌仪抗生素字典库">
          <Splitpanes class="area">
            <!-- 左侧分管类别列表 -->
            <Pane :size="(500 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="instrSearchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getInstrCodeList" @keyup="keyupInstrCodeEnter" @search-click="getInstrCodeList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getInstrCodeList"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-square-plus" content="新增" @click="handleAdd"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" @click="handleSave" :loading="saveLoading"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="handleDelete"></vxe-button>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="germInstrTableRef" border class="mytable-scrollbar" show-header-overflow show-overflow align="center" :row-config="{ isCurrent: true, isHover: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" :column-config="{ resizable: true }" @current-change="instrCodeRowClick" :data="germInstrList" :loading="showLoading">

                  <vxe-column type="checkbox" width="50" align="center"></vxe-column>
                  <vxe-column type="seq" title="序号" width="50"></vxe-column>
                  <vxe-column field="instrCode" title="仪器编码" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{ row.instrCode }}
                    </template>
                    <template #edit="{ row }">
                      <vxe-input v-model="row.instrCode" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="instrName" title="仪器名称" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                      <vxe-input v-model="row.instrName" clearable @clear="() => {}" @keyup.enter.native="() => {}" placeholder="关键字查询"></vxe-input>
                    </template>
                  </vxe-column>
                </vxe-table>
              </div>
            </Pane>

            <!-- 右侧项目信息 -->
            <Pane :size="((conWidth - 1000) / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchZValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="findInstrAntibList" @keyup="keyupInstrAntibEnter" @search-click="findInstrAntibList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findInstrAntibList(selevctBarCodeRow.id)"></vxe-button>
                  <vxe-button type="text" icon="vxe-icon-delete" class="button-red" content="删除" @click="deleteFeeItemVsBarCodeList"></vxe-button>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-save" content="保存" @click="handleSaveFeeItemVsBarCode" :loading="saveLoading"></vxe-button>
                  <div class="msgDiv">双击项目移除对应关系</div>
                </template>
              </vxe-toolbar>
              <div class="leftTable">
                <vxe-table ref="feeItemVsBarCodeTable" border class="mytable-scrollbar" show-header-overflow show-overflow align="center" :row-config="{ isCurrent: true, isHover: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" @cell-dblclick="moveAntibDictList" :data="instrAntibList" :loading="showLoading">
                  <vxe-column type="checkbox" width="30px" align="center"></vxe-column>
                  <vxe-column type="seq" title="序号" width="50"></vxe-column>
                  <vxe-column field="antCode" title="抗生素编码"></vxe-column>
                  <vxe-column field="antName" title="抗生素名称"></vxe-column>
                  <vxe-column field="inputAntCode" title="对照抗生素编码" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{ row.inputAntCode }}
                    </template>
                    <template #edit="{ row }">
                      <vxe-input v-model="row.inputAntCode" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="inputAntNa" title="对照抗生素名称" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #default="{ row }">
                      {{ row.inputAntNa }}
                    </template>
                    <template #edit="{ row }">
                      <vxe-input v-model="row.inputAntNa" type="text"></vxe-input>
                    </template>
                  </vxe-column>
                  <vxe-column field="antType" title="抗生素分类"></vxe-column>
                  <vxe-column field="englishName" title="英文名称"></vxe-column>

                </vxe-table>
              </div>
            </Pane>
            <Pane :size="(500 / conWidth) * 100">
              <vxe-toolbar perfect>
                <template #buttons>
                  <vxe-input v-model="searchValue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @clear="getAntibCodeList" @keyup="keyupAntibCodeEnter" @search-click="getAntibCodeList()"></vxe-input>
                  <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="getAntibCodeList"></vxe-button>
                  <div class="msgDiv">双击项目添加对应关系</div>
                </template>
              </vxe-toolbar>
              <div class="rightTable">
                <el-scrollbar style="height: 100%">
                  <vxe-table ref="labFeeItemTable" border class="mytable-scrollbar" show-header-overflow show-overflow align="center" :row-config="{ isCurrent: true, isHover: true }" @cell-dblclick="feeItemrowClick" :data="antibList" :loading="showLoading">
                    <vxe-column type="seq" title="序号" width="30"></vxe-column>
                    <vxe-column field="antCode" title="抗生素编码"></vxe-column>
                    <vxe-column field="antName" title="抗生素名称"></vxe-column>
                    <vxe-column field="antType" title="抗生素分类"></vxe-column>
                  </vxe-table>
                </el-scrollbar>
              </div>
              <vxe-pager align="left" min-height="32px" height="32px" :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Total']" @page-change="handleSizeChange($event)"></vxe-pager>
            </Pane>
          </Splitpanes>
        </el-tab-pane>
        <el-tab-pane label="操作日志">
          <LogInfo requestUrl="/bac/bacInstrAntibDict"></LogInfo>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区 ==========
import Breadcrumb from '@/components/Breadcrumb.vue';
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VxeNotifyType, VxeMessage } from '../../../utils/CommonMessage';
import LogInfo from '@/components/LogInfo.vue';
import { IsEmpty } from '@/utils/common'; //日志

// 条数/页
const PageSizeList = [10, 50, 100, 200, 500];
// 分页
let page = reactive({
  currentPage: 1,
  pageSize: PageSizeList[1],
  totalResult: 0
});

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let conWidth = ref(document.documentElement.clientWidth);

let loading = ref(false); //查询按钮加载
const germInstrList = reactive([]);
const antibList = reactive([]);
const instrAntibList = reactive([]);
let searchValue = ref('');
let searchZValue = ref('');
let instrSearchValue = ref('');
let selevctBarCodeRow = reactive({
  id: '',
  instrCode: '',
  instrName: ''
});
let saveLoading = ref(false);
let showLoading = ref(false); //刷新+表格加载

// 方法定义区 =============

// 页面加载时
onMounted(() => {
  getInstrCodeList();
});

// 获取分管类别列表
function getInstrCodeList() {
  germInstrList.length = 0;
  showLoading.value = true;
  const url = '/bac/germInstr/getBacGermInstr';
  proxy.$http
    .get(url, { params: { searchValue: instrSearchValue.value } })
    .then((res: any) => {
      germInstrList.length = 0;
      germInstrList.push(...res.data);
      if (germInstrList.length !== 0) {
        instrCodeRowClick({ row: germInstrList[0] });
      }
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

// 新增参考范围
function handleAdd() {
  germInstrList.push({
    id: '',
    instrCode: '',
    instrName: '',
    seq: germInstrList.length + 1
  });
}
// 点击修改新增保存
async function handleSave() {
  if (germInstrList.length === 0) {
    VxeMessage('没有保存的数据', VxeNotifyType.error);
    return;
  } else {
    saveLoading.value = true;
    const url = '/bac/germInstr/saveOrUpdateInstr';
    proxy.$http
      .post(url, germInstrList)
      .then((res: any) => {
        VxeMessage('保存成功', VxeNotifyType.success);
      })
      .catch((err: any) => {
        VxeMessage('保存失败', VxeNotifyType.success);
      });
    setTimeout(() => {
      getInstrCodeList();
      saveLoading.value = false;
    }, 500);
  }
}
//删除参考范围信息
function handleDelete() {
  const germInstrDatas = (proxy.$refs.germInstrTableRef as any).getCheckboxRecords();
  if (!(germInstrDatas.length > 0)) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy.$XModal.confirm('您确定要删除吗？').then((type) => {
      if (type === 'confirm') {
        //后台删除数据
        const delMaintainOrderList = germInstrDatas.filter((p: any) => !IsEmpty(p.id));
        if (delMaintainOrderList.length > 0) {
          const url = '/bac/germInstr/deleteInstr';
          proxy.$http
            .post(url, delMaintainOrderList)
            .then((res: any) => {
              getInstrCodeList(); // 获取检验仪器表格数据
              VxeMessage('删除成功!', VxeNotifyType.success);
            })
            .catch((err: any) => {
              VxeMessage(err, VxeNotifyType.error);
            });
        }
      }
    });
  }
}
// 获取抗生素列表
function getAntibCodeList() {
  antibList.length = 0;
  showLoading.value = true;
  const url = '/lis/bacAntibioticsDict/findPageAntibioticsDictByInstrId';
  let obj = {
    keyWords: searchValue.value,
    instrCode: selevctBarCodeRow.instrCode,
    pageIndex: page.currentPage,
    pageSize: page.pageSize
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      if (res.data && res.data.records.length > 0) {
        antibList.push(...res.data.records);
      } else {
        page.totalResult = 0;
      }
      page.totalResult = res.data.total;
      showLoading.value = false;
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
      showLoading.value = false;
    });
}

function handleSizeChange({ type, currentPage, pageSize }) {
  if (type === 'size') {
    page.currentPage = 1;
  } else {
    page.currentPage = currentPage;
  }
  page.pageSize = pageSize;
  getAntibCodeList();
}

// 删除数据
function deleteFeeItemVsBarCodeList() {
  const selectRows = (proxy.$refs.feeItemVsBarCodeTable as any).getCheckboxRecords();
  const ids = [];
  if (selectRows.length <= 0) {
    VxeMessage('请选择需要删除的信息', VxeNotifyType.warning);
    return;
  }
  for (var i = 0; i < selectRows.length; i++) {
    ids.push(selectRows[i].instrAntibDictId);
  }

  const url = '/bac/bacInstrAntibDict/deleteInstrAntibDict';
  proxy.$http
    .post(url, {
      ids: ids,
      instrName: selevctBarCodeRow.instrName
    })
    .then((res: any) => {
      findInstrAntibList(selevctBarCodeRow.id);
      getAntibCodeList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}

// 保存
function handleSaveFeeItemVsBarCode() {
  if (instrAntibList.length <= 0) {
    VxeMessage('没有要保存的信息', VxeNotifyType.warning);
    return;
  }
  for (const item of instrAntibList) {
    item.id = item.instrAntibDictId;
  }

  const url = '/bac/bacInstrAntibDict/saveInstrAntibDict';
  proxy.$http
    .post(url, instrAntibList)
    .then((res: any) => {
      /*  findInstrAntibList(selevctBarCodeRow.instrCode);
          getAntibCodeList();*/
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
// 双击移除数据
function moveAntibDictList({ row }: any) {
  const url = '/bac/bacInstrAntibDict/deleteInstrAntibDict';
  const ids = [];
  ids.push(row.instrAntibDictId);
  proxy.$http
    .post(url, {
      ids: ids,
      instrName: selevctBarCodeRow.instrName
    })
    .then((res: any) => {
      findInstrAntibList(selevctBarCodeRow.id);
      getAntibCodeList();
      VxeMessage(res.status.msg, VxeNotifyType.success);
    })
    .catch((err: any) => {
      VxeMessage(err, VxeNotifyType.error);
    });
}
// 点击当前行// 行点击事件
function instrCodeRowClick({ row }: any) {
  if (IsEmpty(row.instrCode)) {
    return;
  }
  (proxy.$refs.germInstrTableRef as any).setCurrentRow(row);
  selevctBarCodeRow.id = row.instrCode;
  selevctBarCodeRow.instrCode = row.instrCode;
  selevctBarCodeRow.instrName = row.instrName;
  findInstrAntibList(row.instrCode);
  getAntibCodeList();
}
// 获取中间的项目信息
function findInstrAntibList(id: string) {
  instrAntibList.length = 0;
  const url = '/lis/bacAntibioticsDict/findInstrAntibDictsByInstrId';
  let obj = {
    keyWords: searchZValue.value,
    instrCode: selevctBarCodeRow.instrCode
  };
  proxy.$http
    .get(url, { params: obj })
    .then((res: any) => {
      instrAntibList.length = 0;
      instrAntibList.push(...res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function feeItemrowClick({ row }: any) {
  const url = '/bac/bacInstrAntibDict/addInstrAntibDict';
  let addFeeItemVsBarCode = {
    instrName: selevctBarCodeRow.instrName,
    antibOrGermNo: row.antCode,
    instrCode: selevctBarCodeRow.instrCode,
    seq: instrAntibList.length + 1
  };
  proxy.$http
    .post(url, addFeeItemVsBarCode)
    .then((res: any) => {
      VxeMessage('成功', VxeNotifyType.success);
      findInstrAntibList(selevctBarCodeRow.id);
      getAntibCodeList();
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });
}

function keyupInstrAntibEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findInstrAntibList(null);
  }
}
function keyupInstrCodeEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getInstrCodeList();
  }
}
// 回车查询
function keyupAntibCodeEnter(e: any) {
  if (e.$event.code == 'Enter') {
    getAntibCodeList();
  }
}
</script>

<style lang="scss" scoped>
#BacInstrAntib {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);
    .el-tabs {
      height: 100%;
      :deep(.el-tabs__content) {
        height: calc(100% - 39px);
        padding: 0;
        .el-tab-pane {
          height: 100%;
          .area {
            background-color: $base-white;
            // 附加按钮间距
            .button-blue,
            .button-red {
              margin: 5px 0 5px 5px;
            }
            .leftTable {
              height: calc(100% - 40px);
              .vxe-table--render-wrapper {
                height: 100%;
                .vxe-table--main-wrapper {
                  height: 100%;
                  .vxe-table--body-wrapper {
                    height: calc(100% - 26px) !important;
                  }
                }
              }
              .vxe-table--render-default {
                height: 100%;
              }
            }
            .rightTable {
              height: calc(100% - 40px - 32px);
            }
            .msgDiv {
              margin-left: 5px;
              color: rgb(180, 28, 28);
            }
          }
        }
      }
    }
  }
}
</style>
